<template>
  <div>
    <product-add-dialog-component title="添加采购产品" :visible="product_add_visible" :fetcher="$axios" />
    <product-add-dialog-component
      title="添加手术跟台产品"
      :visible="surgery_add_visible"
      :fetcher="$axios"
      type="surgery"
    />
    <upload-excel-dialog-component :visible="upload_excel_visible" :fetcher="$axios" />
    <address-add-dialog-component :visible="address_add_visible" :fetcher="$axios" />
    <tool-add-dialog-component title="添加工具" :visible="tool_add_visible" :fetcher="$axios" />
    <button type="button" @click="openProductAddDialog()">
      打开普通产品弹窗
    </button>
    <button type="button" @click="openSurgeryAddDialog()">
      打开手术跟台产品弹窗
    </button>
    <button type="button" @click="openUploadExcelDialog()">
      打开上传表格弹窗
    </button>
    <button type="button" @click="openAddressAddDialog()">
      打开添加收货地址弹窗
    </button>
    <button type="button" @click="openToolAddDialog()">
      打开手术工具弹窗
    </button>
  </div>
</template>

<script>
import { ProductAddDialogService, ProductAddDialogComponent } from '~/modules/product/product-add.dialog.module';
import { UploadExcelDialogService, UploadExcelDialogComponent } from '~/modules/upload/upload-excel.dialog.module';
import { AddressAddDialogService, AddressAddDialogComponent } from '~/modules/address/address-add.dialog.module';
import { ToolAddDialogService, ToolAddDialogComponent } from '~/modules/product/tool-add.dialog.module';

export default {
  components: {
    ProductAddDialogComponent,
    UploadExcelDialogComponent,
    AddressAddDialogComponent,
    ToolAddDialogComponent
  },
  data() {
    return {
      product_add_visible: true,
      surgery_add_visible: false,
      upload_excel_visible: false,
      address_add_visible: false,
      tool_add_visible: false
    };
  },
  computed: {
    productAddDialogService: function() {
      return new ProductAddDialogService(this.$axios, { type: 'default' });
    },
    surgeryAddDialogService: function() {
      return new ProductAddDialogService(this.$axios, { type: 'surgery' });
    },
    uploadExcelDialogService: function() {
      return new UploadExcelDialogService(this.$axios);
    },
    addressAddDialogService: function() {
      return new AddressAddDialogService(this.$axios);
    },
    toolAddDialogService: function() {
      return new ToolAddDialogService(this.$axios);
    }
  },
  methods: {
    openProductAddDialog() {
      this.productAddDialogService
        .create({
          title: '添加采购产品',
          query: {},
          confirmButtonClickHandler: (data = {}) => {
            // console.log(data);
            // console.log('取到数据了！');
          }
        })
        .mount();
    },
    openSurgeryAddDialog() {
      this.surgeryAddDialogService
        .create({
          title: '添加手术跟台产品',
          query: {},
          confirmButtonClickHandler: (data = {}) => {
            // console.log(data);
            // console.log('取到数据了！');
          }
        })
        .mount();
    },
    openUploadExcelDialog() {
      this.uploadExcelDialogService
        .create({
          title: '模板导入',
          query: {
            orderId: 1
          },
          progressCompleteHandler: (data = {}) => {
            // console.log(data);
            // console.log('进度到100%');
          }
        })
        .mount();
    },
    openAddressAddDialog() {
      this.addressAddDialogService
        .create({
          title: '新增收货地址',
          confirmButtonClickHandler: (data = {}) => {
            // console.log(data);
            // console.log('取到数据了！');
          }
        })
        .mount();
    },
    openToolAddDialog() {
      this.toolAddDialogService
        .create({
          title: '添加工具',
          query: {},
          confirmButtonClickHandler: (data = {}) => {
            // console.log(data);
            // console.log('取到数据了！');
          }
        })
        .mount();
    }
  }
};
</script>

<style type="text/less"></style>
